<template>
    <div id="bigDiv">
        <head-2 />
        
        <div id="bigTitle">最爱井字棋</div>
        <div id="contentDiv">
            <div class="divOut" v-for="index in 9" :key="index">
                <div class="divIn" @click="changeColor($event, index)" ref="divIn"></div>
            </div>
        </div>
        <div id="GameOver" v-if="isEnd">
            <div id="endTittle">游戏结束</div>
            <div>
                <img src="https://pic2.imgdb.cn/item/644a7a5e0d2dde5777f7ad9f.jpg" alt="" />
                <p>{{ res }}</p>
            </div>
            <div id="btn">
                <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
                <el-button type="success" size="small" @click="goBack">返回首页</el-button>
                <el-button type="success" size="small" @click="lookEnd">查看结果</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import head2 from "@/components/Head/head2.vue";
export default {
    components: { head2 },
    data() {
        return {
            isEnd: false,
            countDwon: 10,
            qColor: "black",
            right: [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6],
            ],
            rightRole1: [],
            rightRole2: [],
            counts: 0,
            res: "",
        };
    },
    mounted() {
        //   this.contDwon()
    },
    methods: {
        onceAgain() {
            var randomArr = Array.from(document.getElementsByClassName("divIn"));
            randomArr.forEach((item) => {
                item.style.backgroundColor = "";
            });
            this.rightRole1 = [];
            this.rightRole2 = [];
            this.isEnd = !this.isEnd;
            this.counts = 0;
        },
        goBack() {
            this.$router.push("/home");
        },
        lookEnd() {
            this.isEnd = !this.isEnd;
        },
        changeColor(e, index) {
            if (e.target.style.backgroundColor) {
                return false;
            } else {
                e.target.style.backgroundColor = this.qColor;
                this.rightRole1.push(index - 1);
                if (this.isWin()) {
                    return false;
                }
                this.counts++;
                setTimeout(() => {
                    this.qColor = "white";
                    this.changeRandom();
                    this.qColor = "black";
                }, 200);
            }
        },
        changeRandom() {
            var randomArr = Array.from(document.getElementsByClassName("divIn"));
            var randNumber = Math.floor(Math.random() * 9);
            for (var i = 0; i < 9; i += 3) {
                //横排
                if (
                    this.rightRole1.includes(i + 1) &&
                    this.rightRole1.includes(i + 2) &&
                    !randomArr[i].style.backgroundColor
                ) {
                    randNumber = i;
                } else if (
                    this.rightRole1.includes(i + 1) &&
                    this.rightRole1.includes(i) &&
                    !randomArr[i + 2].style.backgroundColor
                ) {
                    randNumber = i + 2;
                } else if (
                    this.rightRole1.includes(i + 2) &&
                    this.rightRole1.includes(i) &&
                    !randomArr[i + 1].style.backgroundColor
                ) {
                    randNumber = i + 1;
                }
            }
            for (var i = 0; i < 3; i++) {
                //竖排
                if (
                    this.rightRole1.includes(i + 3) &&
                    this.rightRole1.includes(i + 6) &&
                    !randomArr[i].style.backgroundColor
                ) {
                    randNumber = i;
                } else if (
                    this.rightRole1.includes(i + 6) &&
                    this.rightRole1.includes(i) &&
                    !randomArr[i + 3].style.backgroundColor
                ) {
                    randNumber = i + 3;
                } else if (
                    this.rightRole1.includes(i + 3) &&
                    this.rightRole1.includes(i) &&
                    !randomArr[i + 6].style.backgroundColor
                ) {
                    randNumber = i + 6;
                }
            }
            if (
                this.rightRole1.includes(4) &&
                this.rightRole1.includes(8) &&
                !randomArr[0].style.backgroundColor
            ) {
                randNumber = 0;
            } else if (
                this.rightRole1.includes(4) &&
                this.rightRole1.includes(0) &&
                !randomArr[8].style.backgroundColor
            ) {
                randNumber = 8;
            } else if (
                this.rightRole1.includes(0) &&
                this.rightRole1.includes(8) &&
                !randomArr[4].style.backgroundColor
            ) {
                randNumber = 4;
            } else if (
                this.rightRole1.includes(4) &&
                this.rightRole1.includes(2) &&
                !randomArr[6].style.backgroundColor
            ) {
                randNumber = 6;
            } else if (
                this.rightRole1.includes(6) &&
                this.rightRole1.includes(4) &&
                !randomArr[2].style.backgroundColor
            ) {
                randNumber = 2;
            } else if (
                this.rightRole1.includes(2) &&
                this.rightRole1.includes(6) &&
                !randomArr[4].style.backgroundColor
            ) {
                randNumber = 4;
            }
            if (!randomArr[randNumber].style.backgroundColor) {
                randomArr[randNumber].style.backgroundColor = this.qColor;
                this.rightRole2.push(randNumber);
                if (this.isWin()) {
                    return false;
                }
                this.counts++;
            } else {
                if (this.counts < 8) {
                    this.changeRandom();
                }
            }
        },
        isWin() {
            var panduan1 = this.rightRole1.sort((a, b) => a - b).join(""); //将白色棋子所在的位置冲小到大统计
            var panduan2 = this.rightRole2.sort((a, b) => a - b).join(""); //将黑色棋子所在的位置冲小到大统计
            var rege =
                /012|345|678|0[0-9]*3[0-9]*6|1[0-9]*4[0-9]*7|2[0-9]*5[0-9]*8|0[0-9]*4[0-9]*8|2[0-9]*4[0-9]*6/;
            if (rege.test(panduan1)) {
                this.isEnd = !this.isEnd;
                this.res = "恭喜你，黑棋获胜";
                return true;
            }
            if (rege.test(panduan2)) {
                this.isEnd = !this.isEnd;
                this.res = "很遗憾，白棋胜";
                return true;
            }
            if (this.counts == 8) {
                this.isEnd = !this.isEnd;
                this.res = "都很不错，平局";
                return false;
            }
        },
    },
};
</script>
  
<style lang="less" scoped>
#GameOver {
    width: 80vw;
    height: 65vh;
    background-color: rgb(218, 225, 218);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    #endTittle {
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    p {
        font-size: 18px;
        color: red;
        font-weight: bold;
        margin-bottom: 5vh;
        letter-spacing: 2px;
    }
    img {
        margin: 6vh auto 1vh;
        width: 90%;
        height: 30vh;
        object-fit: cover;
    }
    #btn {
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
    }
}

#bigDiv {
    height: 100vh;

    #countDown {
        font-size: 18px;
        font-weight: bold;
        margin-top: 30px;
        letter-spacing: 2px;

        #timeNumber {
            color: red;
        }
    }

    #bigTitle {
        font-weight: bold;
        font-size: 22px;
        margin-top: 20px;
        letter-spacing: 3px;
    }

    #contentDiv {
        margin-top: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 94vw;
        height: 42vh;

        .divOut {
            width: 29vw;
            height: 29vw;
            background-color: red;
            border: 2px black solid;
            margin-right: -2px;
            margin-bottom: -2px;

            .divIn {
                width: 25vw;
                height: 25vw;
                margin: 2vw auto;
                background-color: red;
                border-radius: 50%;
            }
        }
    }
}
</style>